<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      max-height="820"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-form label-position="left" inline class="table-expand">
            <el-form-item label="Institute">
              <span>{{ scope.row.InsIdCd }}</span>
            </el-form-item>
            <el-form-item label="Merchant Name">
              <span>{{ scope.row.MerchantName }}</span>
            </el-form-item>
            <el-form-item label="Merchant Zone">
              <span>{{ scope.row.MerchantZone }}</span>
            </el-form-item>
            <el-form-item label="Merchant Type">
              <span>{{ scope.row.MerchantType }}</span>
            </el-form-item>
            <el-form-item label="Address">
              <span>
                {{ scope.row.Address }}
              </span>
            </el-form-item>
            <el-form-item label="Description">
              <span>{{ scope.row.Description }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column type="index" align="center" label="ID" width="95" />
      <el-table-column align="center" label="Vendor">
        <template slot-scope="scope">
          {{ scope.row.Vendor }}
        </template>
      </el-table-column>
      <el-table-column label="POS UID" width="350">
        <template slot-scope="scope">
          {{ scope.row.PosUid }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="Status" width="110" align="center">
        <template slot-scope="scope">
          <el-tag effect="light" :type="scope.row.Status | statusFilter">{{ scope.row.Status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="Create Time">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.ApplyTime }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="Expire Date">
        <template slot-scope="scope">
          <i class="el-icon-date" />
          <span>{{ scope.row.ExpireDate }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="Edit" width="95">
        <template slot-scope="scope">
          <el-button type="primary" @click="showDialog(scope.row)">
            <i class="el-icon-edit" />
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="listLength"
      :page-size="15"
      @next-click="movePage"
      @prev-click="movePage"
      @current-change="movePage"
    />
    <el-dialog title="Modification" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="Institute" :label-width="formLabelWidth">
          <el-input v-model="form.InsIdCd" autocomplete="off" />
        </el-form-item>
        <el-form-item label="Merchant Name" :label-width="formLabelWidth">
          <el-input v-model="form.MerchantName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="Merchant Zone" :label-width="formLabelWidth">
          <el-input v-model="form.MerchantZone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="Merchant Type" :label-width="formLabelWidth">
          <el-input v-model="form.MerchantType" autocomplete="off" />
        </el-form-item>
        <el-form-item label="Address" :label-width="formLabelWidth">
          <el-input v-model="form.Address" autocomplete="off" />
        </el-form-item>
        <el-form-item label="Status" :label-width="formLabelWidth">
          <el-select v-model="form.Status" placeholder="Please set status">
            <el-option label="Occupied" value="occupied" />
            <el-option label="Available" value="available" />
            <el-option label="Disabled" value="disabled" />
          </el-select>
        </el-form-item>
        <el-form-item prop="date" label="Expire Time" :label-width="formLabelWidth" sortable>
          <el-col :span="11">
            <el-date-picker v-model="form.ExpireDate" type="datetime" placeholder="Pick a date" style="width: 100%;" />
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="modiRec">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList } from '@/api/table'
import { postPOSInfo } from '@/api/pos'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        available: 'success',
        occupied: 'info',
        disabled: 'warning',
        expired: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      totalList: null,
      listLength: 0,
      listLoading: true,
      dialogFormVisible: false,
      form: {
        ID: null,
        InsIdCd: '',
        MerchantName: '',
        MerchantZone: '',
        MerchantType: '',
        Address: '',
        ExpireDate: '',
        Status: ''
      },
      formLabelWidth: '120px'
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList().then(response => {
        const { Data } = response
        this.totalList = Data.Items
        this.list = this.totalList.slice(0, 15)
        this.listLength = Data.Total
        this.listLoading = false
      })
    },
    showDialog(rec) {
      this.dialogFormVisible = true
      this.form.ID = rec.ID
      this.form.InsIdCd = rec.InsIdCd
      this.form.MerchantName = rec.MerchantName
      this.form.MerchantZone = rec.MerchantZone
      this.form.MerchantType = rec.MerchantType
      this.form.Address = rec.Address
      this.form.Status = rec.Status
      this.form.ExpireDate = rec.ExpireDate
    },
    modiRec() {
      this.dialogFormVisible = false
      postPOSInfo(this.form).then(response => {
        const { Data } = response
        if (Data.Status === 0) {
          this.$message.success('Successfully modified!')
        } else {
          this.$message.error('Error: ' + Data.ErrMsg)
        }
      })
    },
    movePage(curr) {
      const start = 15 * (curr - 1)
      const end = start + 15
      this.list = this.totalList.slice(start, end)
    }
  }
}
</script>
<style>
.table-expand{
  font-size: 0;
}
.table-expand label{
  width: 150px;
  color: #99a9bf;
}
.table-expand .el-form-item{
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}

</style>
